
<template>
  <base-page-view class-name="page-container welfare">
    <view class="welfare-tab">
      <view v-for="(tab,index) in tabTit" :key="index" class="tab-item" :class="{active:active==index}" @click="toggle(index)">
        {{ tab }}
        <view v-if="active===index" class="borderBottom">
        </view>
      </view>
    </view>
    <view v-if="listData.length>0" class="content">
      <view v-for="(list,index) in listData" :key="index" class="list">
        <image :src="list.activation_pic?list.activation_pic:'/static/images/commission/bixuan_icon.png'" class="bixuan_icon" />
        <view class="mid">
          <view>{{ list.activation_consignee }}</view>
          <view class="phone_box">
            <view class="phone">
              手机号：{{ list.activation_mobile }}
            </view>
            <image v-if="list.status===0&&list.mobile_change===false" src="/static/images/commission/edit_icon.png" class="edit_icon" @click="updateMobile(list,index)" />
          </view>
          <view class="orderNo">订单号：{{ list.order_no }}</view>
        </view>
        <view class="set">
          <view v-if="active===0&&list.status===0" class="todoBtn" @click="toActivated(list, index)">激活</view>
          <view v-if="active===0&&list.status===0" class="logoutBtn" @click="showDeActive(list,index)">注销</view>
          <view v-if="active===0&&list.status===2" class="logoutBtn">已注销</view>
          <view v-if="active===1&&list.status===1" class="activated">已激活</view>
        </view>
      </view>
    </view>
    <view v-if="nomore&&listData.length<1" class="empty_view">
      <image src="/static/images/commission/commission-empty.png" class="empty_img" />
      <view class="tit">暂无任何内容</view>
    </view>
    <view v-if="nomore&&listData.length>0" class="nomore">暂无更多数据~</view>
    <base-popup :show="pShow" :show-close="false" type="center" :has-scroll="true" :mask="true" :mask-close="true" position-type="fixed" @close="closePopup">
      <view v-if="pShow" class="popupBox">
        <view class="popTitle">确认激活</view>
        <view class="popText">激活后箱起礼包将不可退货，请谨慎激活</view>
        <view class="popupInfo">
          {{ validForm.phone }}
        </view>
        <view class="popupInfo">
          <input v-model="validForm.code" class="input" type="number" placeholder="请输入短信验证码" placeholder-class="placeholder" maxlength="6" />
          <image v-if="validForm.code.length>0" src="/static/images/commission/delete.png" class="deleteIcon" @click="validForm.code=''" />
          <span class="code" @click="verify">{{ getVerify }}</span>
        </view>
        <view class="popupBtn">
          <view class="cancle" @click="closeDialog">取消</view>
          <view class="sure" :class="{beAble: (validForm.code.length === 6)}" @click="activeDone">确认</view>
        </view>
      </view>
    </base-popup>
    <base-popup :show="pShowP" :show-close="false" type="center" :has-scroll="true" :mask="true" :mask-close="true" position-type="fixed" @close="closePhonePopup">
      <view v-if="pShowP" class="popupPhoneBox">
        <view class="title">更改待激活用户手机号码</view>
        <view class="popupInfo">
          <input v-model="editMobileOne" class="input" type="number" placeholder="请输入新的手机号" placeholder-class="placeholderStyle" maxlength="11" />
        </view>
        <view class="popupInfo">
          <input v-model="editMobileTwo" class="input" type="number" placeholder="请再次输入新的手机号" placeholder-class="placeholderStyle" maxlength="11" />
        </view>
        <view class="text">待激活用户手机号码仅可修改一次，请谨慎操作</view>
        <view class="popupBtn">
          <view class="cancle" @click="closeDialogP">取消</view>
          <view class="sure" :class="{beAble: checkMobile}" @click="sureUpdateMobile()">确认</view>
        </view>
      </view>
    </base-popup>
  </base-page-view>
</template>

<script>
import './index.scss'
import { regexp } from '@/utils/regexp'
export default {
  components: {
  },
  data() {
    return {
      tabTit: ['待激活', '已激活'],
      active: 0,
      pageSize: 10,
      pageNo: 1,
      listData: [],
      nomore: false,
      pShow: false,
      pShowP: false,
      validForm: {
        phone: '',
        code: ''
      },
      getVerify: '获取验证码',
      activeInfo: {},
      activeIndex: -1,
      updateInfo: {},
      editMobileOne: '',
      editMobileTwo: '',
      updateIndex: -1
    }
  },
  computed: {
    checkMobile() {
      if (regexp.mobile.test(this.editMobileOne) && regexp.mobile.test(this.editMobileTwo) && (this.editMobileOne === this.editMobileTwo)) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
  },
  onLoad(option) {
    this.nomore = false
    // this.getList()
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.listData = []
    this.nomore = false
    this.app_interactive_data()
  },
  onReachBottom() {
    if (this.nomore) return
    this.pageNo += 1
    this.app_interactive_data()
  },
  onShow() {
  },
  methods: {
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    closePhonePopup() {
      this.$set(this, 'pShowP', false)
    },
    closeDialog() {
      this.pShow = false
      this.validForm.code = ''
    },
    closeDialogP() {
      this.pShowP = false
    },
    async app_interactive_data() {
      const res = await this.$api.commissionApi.getHundredActiveList({
        page_size: this.pageSize,
        page_no: this.pageNo,
        status: this.active
      })
      if (res.code === 0) {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        this.listData = this.listData.concat(res.data)
        if (res.data.length < this.pageSize) {
          this.nomore = true
        }
      }
    },
    toggle(index) {
      this.active = index
      this.nomore = false
      this.listData = []
      this.pageNo = 1
      this.app_interactive_data()
    },
    toActivated(item, index) {
      this.activeInfo = item
      this.activeIndex = index
      this.validForm.phone = item.activation_mobile
      this.pShow = true
    },
    // 注销
    showDeActive(item, index) {
      this.$gc.$message({
        content: '注销后将不产生助力奖金且永久不可再激活，请谨慎设置',
        title: '提示',
        confirmColor: '#fff',
        showMessage: true,
        confirmText: '确认注销',
        confirmBackground: '#FF759F',
        align: 'center',
        confirm: async() => {
          const res = await this.$api.commissionApi.destoryActive({ orderId: item.order_id })
          if (res.code === 0) {
            this.listData[index].status = 2
            uni.showToast({
              title: '注销成功!',
              icon: 'none',
              duration: 3 * 1000
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 3 * 1000
            })
          }
        }
      })
    },
    // 激活
    async activeDone() {
      if (this.validForm.code.length === 6) {
        const params = {
          userId: this.activeInfo.user_id, // 购买用户id
          orderId: this.activeInfo.order_id, // 订单id
          mobile: this.validForm.phone, // 手机号
          verifyCode: this.validForm.code // 验证码
        }
        const res = await this.$api.commissionApi.getActivePermission(params)
        if (res.code === 0) {
          this.listData.splice(this.activeIndex, 1)
          this.pShow = false
          uni.showToast({
            title: '激活成功!',
            icon: 'none',
            duration: 3 * 1000
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 3 * 1000
          })
          return
        }
      }
    },
    // 获取验证码前的验证
    async verify() {
      if (this.getVerify !== '获取验证码') {
        return
      }
      this.getSMS()
    },
    // 请求验证码
    async getSMS() {
      const params = {
        regionCode: '+86', // 手机区号
        mobile: this.validForm.phone, // 手机号
        type: 1 // 验证码类型，默认0：0-登录验证码，1-箱起激活验证码
      }
      const res = await this.$api.commissionApi.getVerifyCode(params)
      if (res.code) {
        return
      }
      uni.showToast({
        title: '短信发送成功，请注意查收！',
        icon: 'none',
        duration: 3 * 1000
      })
      let value = 60
      this.getVerify = value + 's'
      const timers = setInterval(() => {
        value--
        this.getVerify = value + 's'
        if (value <= 0) {
          clearInterval(timers)
          this.getVerify = '获取验证码'
        }
      }, 1000)
    },
    updateMobile(item, index) {
      this.pShowP = true
      this.updateInfo = item
      this.updateIndex = index
    },
    async sureUpdateMobile() {
      if (this.checkMobile) {
        const res = await this.$api.commissionApi.updateMobile({
          userId: this.updateInfo.user_id,
          orderId: this.updateInfo.order_id,
          activationMobile: this.editMobileOne
        })
        if (res.code === 0) {
          uni.showToast({
            title: '手机号修改成功',
            icon: 'none',
            duration: 3 * 1000
          })
          this.listData[this.updateIndex].activation_mobile = this.editMobileOne
          this.listData[this.updateIndex].mobile_change = true
          this.pShowP = false
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 3 * 1000
          })
        }
      } else {
        uni.showToast({
          title: '手机号输错,或两次输入不一致',
          icon: 'none',
          duration: 3 * 1000
        })
      }
    }
  }
}
</script>
